$base: (
  font-family:            (-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif),
  font-family-code:       (Menlo, Monaco, Consolas, Andale Mono, lucida console, Courier New, monospace),

  font-size-root:         16px,

  font-size-xl:           1.6rem,
  font-size-lg:           1.25rem,
  font-size:              1rem,
  font-size-sm:           .875rem,
  font-size-xs:           .75rem,

  font-size-h1-lg:        3rem,
  font-size-h2-lg:        2rem,
  font-size-h3-lg:        1.75rem,
  font-size-h4-lg:        1.5rem,
  font-size-h5-lg:        1.25rem,
  font-size-h6-lg:        1.25rem,

  font-size-h1:           2.5rem,
  font-size-h2:           1.9rem,
  font-size-h3:           1.5rem,
  font-size-h4:           1.2rem,
  font-size-h5:           1rem,
  font-size-h6:           1rem,

  font-size-h1-sm:        2rem,
  font-size-h2-sm:        1.5rem,
  font-size-h3-sm:        1.35rem,
  font-size-h4-sm:        1.15rem,
  font-size-h5-sm:        1rem,
  font-size-h6-sm:        1rem,

  font-size-h1-xs:        1rem,
  font-size-h2-xs:        .9rem,
  font-size-h3-xs:        .85rem,
  font-size-h4-xs:        .8rem,
  font-size-h5-xs:        .75rem,
  font-size-h6-xs:        .75rem,

  font-weight:            400,
  font-weight-bold:       700,

  line-height-xl:         2.1,
  line-height-lg:         1.8,
  line-height:            1.6,
  line-height-sm:         1.4,
  line-height-xs:         1.2,

  spacer:                 1rem,

  vertical-space:         .5rem,
  vertical-space-lg:      1.4rem,

  border-radius-lg:       .8rem,
  border-radius:          .4rem,
  border-radius-sm:       .2rem
);

$spacers: (
  0:                      0,
  1:                      map-get($base, spacer) * .25,
  2:                      map-get($base, spacer) * .5,
  3:                      map-get($base, spacer),
  4:                      map-get($base, spacer) * 1.5,
  5:                      map-get($base, spacer) * 3
);

$layout: (
  header-height:          5rem,
  header-height-sm:       3rem,
  content-max-width:      1050px,
  sidebar-width:          250px,
  sidebar-header-height:  3rem,
  aside-width:            220px,
  footer-height:          10rem
);

//     sm       md       lg
// | ------ | ------ | ------ |
// 0       500      1024      -

$responsive: (
  sm:                      0px,
  md:                      500px,
  lg:                      1024px
);

$animation: (
  duration:               .6s,
  timing-function:        ease-in-out
);

$link: (
  transition:             all .2s ease-in-out
);

$button: (
  padding-y-lg:           .3rem,
  padding-x-lg:           1.2rem,

  padding-y:              .1rem,
  padding-x:              .55rem,

  padding-y-sm:           .06rem,
  padding-x-sm:           .35rem,

  font-weight:            map-get($base, font-weight-bold),

  pill-radius:            4rem,

  circle-diameter-lg:     2.8rem,
  circle-diameter:        2rem,
  circle-diameter-sm:     1.5rem,

  transition:             all .2s ease-in-out
);

$menu: (
  horizontal-spacer:      1,
  horizontal-item-vertical-spacer: 1
);